<template>
  <div class="container gray">
    <!-- 头部 -->
    <div class="header">
      <span class="iconfont back_icon" @click="toCart">&#xe616;</span>
      <h3>订单填写</h3>
    </div>
    <!-- 订单区域 -->
    <div class="order_form w">
      <!-- 地址 -->
      <div class="order_form_item" v-if="address">
        <h3 class="address">{{ address.cgn_address }}</h3>
      </div>
      <div class="order_form_item" v-else>
        <router-link to="/addaddress" tag="h3" class="address">请填写收货地址<span class="iconfont right_icon">&#xe731;</span></router-link>
      </div>
      <!-- 商品列表 -->
      <div class="order_form_item">
        <h3 class="title">商品清单</h3>
        <ul>
          <li v-for="item in GoodsListInCart" :key="item.goods_id" class="good">
            <div class="good_img">
              <img :src="item.goods_imgs[0]">
            </div>
            <div class="good_name">
              <h3>{{ item.goods_name }}</h3>
            </div>
            <div class="good_price">
              <p class="current">￥{{ item.goods_price }}</p>
              <p class="old_price">{{ item.goods_oldprice | priceFilter }}</p>
              <p class="good_count">x {{ item.count }}</p>
            </div>
          </li>
        </ul>
        <!-- 总件数 -->
        <div class="count">共{{ count }}件</div>
        <!-- 总价 -->
        <div class="amount">小计:￥{{ amount }}</div>
      </div>
    </div>
    <!-- 支付 -->
    <div class="order_form_footer">
      <button class="btn" @click="toPay">去支付</button>
    </div>
  </div>
</template>

<script>
import currentTime from '@/assets/js/current.js'
import { mapState, mapGetters } from 'vuex'
import qs from 'qs'
export default {
  name: 'OrderForm',
  computed: {
    ...mapState(['address']),
    ...mapGetters(['amount', 'count', 'GoodsListInCart', 'orderGoods'])
  },
  filters: {
    priceFilter (value) {
      if (value !== 0) return '¥' + value
      return ''
    }
  },
  methods: {
    // 返回购物车页面
    toCart () {
      this.$router.push({
        path: '/cart'
      })
    },
    // 订单支付
    toPay () {
      if (this.address) {
        this.$confirm('您是否确定支付', '', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: '',
          center: true
        }).then(async () => {
          // 提交的订单信息
          const orderForm = {
            user_id: JSON.parse(sessionStorage.getItem('address')).user_id,
            user_tel: JSON.parse(sessionStorage.getItem('address')).cgn_tel,
            username: JSON.parse(sessionStorage.getItem('address')).cgn_name,
            order_number: Math.random().toString().slice(2),
            order_price: this.amount,
            consignee_addr: this.address.cgn_address,
            goods_list: JSON.stringify(this.orderGoods),
            create_time: currentTime()
          }
          // Qs.stringify()将对象序列化成URL的形式，Qs是axios里面自带的
          const str = qs.stringify(orderForm)
          const { data: res } = await this.$http.post('/api/cart/addorder', str, { headers: { 'Content-Type': 'application/x-www-form-urlencoded' } })
          if (res.meta.status !== 200) return this.$message.error(res.meta.msg)
          this.$store.commit('clearCart')
          this.$router.push({
            path: '/cart'
          })
        }).catch(() => {})
      } else {
        this.$message.error('请填写收货地址')
      }
    }
  }
}
</script>

<style lang="less" scoped>
.container {
  overflow: hidden;
  width: 15rem;
  height: 100%;
  overflow-y: scroll;
    &::-webkit-scrollbar {
      display: none;
    }
}
// 头部
.header {
  position: relative;
  width: 100%;
  height: 1.6rem;
  line-height: 1.6rem;
  font-size: .72rem;
  text-align: center;
  background: #fff;
  .back_icon {
    position: absolute;
    left: .4rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: .8rem;
  }
}
// 商品清单列表
.order_form {
  overflow: hidden;
  padding-bottom: 2rem;
}
// 每一项
.order_form_item {
  background: #fff;
  padding: .4rem;
  margin: .4rem 0;
  border-radius: .2rem;
  // 收货地址
  .address {
    position: relative;
    font-size: .72rem;
    font-weight: 600!important;
    padding: .2rem 0;
    .right_icon {
      position: absolute;
      right: 0;
      font-size: .8rem;
    }
  }
  // 商品列表
  .title {
    font-size: .64rem;
    border-bottom: 1px solid #eee;
    padding-bottom: .4rem;
  }
  .good {
    display: flex;
    height: 3.2rem;
    border-bottom: 1px solid #eee;
    padding: .2rem 0;
    .good_img {
      align-self: center;
      width: 2rem;
      height: 2rem;
      margin-right: .4rem;
      img {
        width: 100%;
      }
    }
    .good_name {
      flex: 1;
      h3 {
        font-size: .56rem;
      }
    }
    .good_price{
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      align-items: center;
      width: 2rem;
      font-size: .48rem;
      .current {
        font-size: .64rem;
      }
      .old_price {
        text-decoration: line-through;
        color: #999;
      }
      .good_count {
        color: #999;
      }
    }
  }
  // 总件数
  .count {
    font-size: .56rem;
    text-align: right;
    padding-top: .4rem;
  }
  // 总价
  .amount {
    font-size: .56rem;
    font-weight: 700;
    text-align: right;
    padding-top: .4rem;
  }
}
// 支付
.order_form_footer {
  position: fixed;
  bottom: 0;
  width: 15rem;
  height: 2rem;
  z-index: 99;
  background-color: #fff;
  .btn {
    float: right;
    width: 4rem;
    height: 1.6rem;
    line-height: 1.6rem;
    font-size: .72rem;
    color: #fff;
    text-align: center;
    background: rgb(255, 20, 147);
    border-radius: .2rem;
    margin-top: .2rem;
    margin-right: .4rem;
  }
}
</style>
